<template>
  <div class="registered">
    <!-- 头部 -->
    <van-nav-bar
      title="注册"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- form表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="state.username"
        name="user_phone"
        label=""
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="state.password"
        type="password"
        name="password"
        label=""
        placeholder="请输入密码"
        class="passwordimg"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        placeholder="请输入验证码"
        name='phone_code'
         v-model="state.phone_code"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px; position: relative">
        <van-button
          round
          type="primary"
          style="
            height: 30px;
            font-size: 0.32rem;
            position: absolute;
            top: calc(-100% - 20px);
            right: 0px;
          "
          @click="fn"
          >获取验证码</van-button
        >
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
  <!-- 跳转到登录页 -->
  <router-link
    to="/login"
    style="font-size: 15px; color: #999; margin-left: 40px"
    >已有帐号</router-link
  >
</template>
<script>
//表单验证需要的组件
import { ref } from "vue";
import router from "../../router/index.js";
export default {
  setup() {
    //头部点击左侧按钮
    const onClickLeft = () => {
      //vue2.0的this.$router.go(-1)
      router.back();
    };
    //表单验证的
    const state = ref({
      username: "",
      password: "",
      phone_code:'',
    });
    const onSubmit = (values) => {
      //注册的点击事件
      console.log(values);
      fetch('http://www.pudge.wang:5000/api/users/register',{
        method:'POST',
        headers:{
      　　'Content-Type': 'application/json;charset=utf-8'
      　　},
       body:JSON.stringify(values)
      }).then(response=>response.json()).then(res=>{
        console.log(res);
        if(res.status!==0){
          alert(res.msg)
        }else{
          alert(res.msg)
          router.push("/login")
        }
      })
    };
     const fn=(values)=>{
      //  console.log(values.path[2].getElementsByClassName('van-field__control')[0].value);
       let obj={}
       obj.password=values.path[2].getElementsByClassName('van-field__control')[1].value
       obj.user_phone=values.path[2].getElementsByClassName('van-field__control')[0].value
       console.log(obj);
      //获取验证码的点击事件
       fetch('http://www.pudge.wang:5000/api/users/getCode',{
      　　method: 'POST',
      　　//用于传递实际参数
      　　body : JSON.stringify(obj),
      　　//进行配置 必须设置
      　　headers:{
      　　　　'Content-Type': 'application/json;charset=utf-8'
      　　}
      })
      .then(response=>response.json()).then(res => {
        if(res.status!==0){
          alert(res.msg)
        }
        
      });
    }
    return {
      fn,
      onClickLeft,
      onSubmit,
      state,
    };
  },
};
</script>

<style >
.registered .van-field__body {
  border-bottom: 1px solid #ccc;
  padding: 0px;
  position: relative;
}

.registered .van-cell {
  overflow: visible;
  margin-top: 10px;
  background: url(../../assets/img/手机@2x.png) no-repeat 18px center;
  background-size: 10px;
}
.registered .passwordimg {
  background: url(../../assets/img/密码@2x.png) no-repeat 18px center;
  background-size: 10px;
}
.registered .van-field__error-message {
  position: absolute;
  bottom: -24px;
}
.registered input{
  background: transparent;
}
.registered .van-form {
  padding: 30% 40px 0px;
}
.registered .van-button {
  background-color: #4cc79b;
  border: none;
}
.registered .van-field__control {
  padding: 0px 20px;
  
}
</style>
